css-vars-ponyfill
Advanced tools
Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers
The css-vars-ponyfill package is a JavaScript library that provides a polyfill for CSS custom properties (CSS variables) in browsers that do not support them natively. It allows developers to use CSS variables in their stylesheets and ensures compatibility across all browsers, including older versions of Internet Explorer.
Basic Usage
This is the simplest way to use css-vars-ponyfill. By calling the cssVars() function, the library will automatically find and process all CSS variables in your stylesheets and apply the necessary polyfills to ensure compatibility.
cssVars();Custom Configuration
This example demonstrates how to use css-vars-ponyfill with custom configuration options. You can specify various parameters such as the root element, whether to include shadow DOM, which elements to include or exclude, custom variables, and callback functions for different stages of the process.
cssVars({
rootElement: document,
shadowDOM: false,
include: 'style,link[rel=stylesheet]',
exclude: '',
variables: {},
onlyLegacy: true,
preserveStatic: true,
preserveVars: false,
silent: false,
updateDOM: true,
updateURLs: true,
watch: false,
onBeforeSend: function(xhr, elm, url) {},
onSuccess: function(cssText, elm, url) {},
onWarning: function(message) {},
onError: function(message, elm, xhr, url) {},
onComplete: function(cssText, styleElms, cssVariables, benchmark) {}
});Dynamic Updates
By setting the watch option to true, css-vars-ponyfill will automatically reprocess CSS variables whenever changes are detected in the DOM. This is useful for applications where styles are dynamically updated or added.
cssVars({
watch: true
});postcss-custom-properties is a PostCSS plugin that transforms W3C CSS Custom Properties (CSS variables) syntax into a static representation. Unlike css-vars-ponyfill, which works at runtime in the browser, postcss-custom-properties processes CSS at build time, making it suitable for build pipelines but not for dynamic updates.
A ponyfill that provides client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers.
<link>, <style>, and @import CSSurl() paths to absolute URLsvar() functionsvar() function fallback values<link> and <style> changesLimitations
:root and :host rulesetsvar() is limited to property values (per W3C specification)Browser Support
Chrome 19+
Edge 12+
Firefox 6+
IE 9+
Safari 6+
See the documentation site for details.
A sponsorship is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.
If you benefit from this project, please consider lending your support and encouraging future efforts by becoming a sponsor.
Thank you! 🙏🏻
This project is licensed under the MIT License. See the MIT LICENSE for details.
Copyright (c) John Hildenbiddle (@jhildenbiddle)
2.4.9
2024-03-05
FAQs
Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers
We found that css-vars-ponyfill demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.